<template>
	<view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		 @scroll="scroll">
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="picker">
					当前选择：{{array[index]}}
				</view>
			</picker>
			<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
				<view class="picker">
					当前选择: {{date}}
				</view>
			</picker>
			<radio-group class="radio-group" @change="radioChange">
				<label class="radio" v-for="(item, index) in items" :key="item.name">
					<radio :value="item.name" :checked="item.checked" /> {{item.value}}
					<br />
				</label>
			</radio-group>

			<uni-rate value="2"></uni-rate>
			<view class="gotop" @tap="goTop">
				<text>返回</text>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="item.img"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{item.title}}</view>
							<view class="uni-media-list-text-bottom uni-ellipsis">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<button type="primary">按钮</button>
			<label class="radio">
				<radio value="1" checked="true" />
			</label>
			<image src="../../static/mp-weixin/a.png"></image>
			<!-- <image src="../../static/h5/b.jpg"></image> -->
			<button type="primary" @click="handleSetInfo">设置userinfo</button>
			<!-- #ifdef MP-WEIXIN -->
			<image src="../../static/mp-weixin/a.png"></image>
			我在小程序中出现了888999
			<!-- #endif -->

		</scroll-view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		components: {
			uniRate //第二步，注册组件
		},
		data() {
			return {
				array: ['A', 'B', 'C'],
				index: 0,
				date: '2017-6-1',
				items: [{
						name: 'USA',
						value: '美国'
					},
					{
						name: 'CHN',
						value: '中国',
						checked: 'true'
					},
					{
						name: 'BRA',
						value: '巴西'
					},
					{
						name: 'JPN',
						value: '日本'
					},
					{
						name: 'ENG',
						value: '英国'
					},
					{
						name: 'TUR',
						value: '法国'
					}
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: [{
						title: '11111',
						content: 'content'
					}

				],
				homeHeight: 1500
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.info.userinfo
			})
		},
		onReady() {
			console.log(this.old.scrollTop)
			uni.showToast({
				title: '我是弹窗',
				mask: false,
				duration: 1500
			});
		},
		onLoad(options) {
			console.log(options)
		},
		methods: {
			...mapActions([
				"info_seclect"
			]),
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			bindPickerChange(e) {
				console.log(e)
				this.index = e.detail.value
			},
			radioChange(e) {
				console.log('radio发生change事件，携带value值为：', e.target.value)
			},
			handleSetInfo(e) {
				this.info_seclect({
					name: '456'
				})
				console.log(this.userinfo)
			},
		}
	}
</script>

<style lang="scss">
	.scroll-Y {
		height: calc(100vh - 44px);
		overflow: hidden;
	}

	.gotop {
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.8);

		text {
			color: #fff;
			text-align: center;
			line-height: 80rpx;

			font-size: 28rpx;
		}
	}
</style>
